<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String msg =String.valueOf(request.getAttribute("msg"));
String lat = request.getParameter("lat");
out.write("<SCRIPT language="+"'"+"JavaScript"+"'"+">var lat="+"'"+lat+"'"+";</SCRIPT>");
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>服务网点管理</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link href="css/jquery-ui.css" rel="stylesheet" type="text/css"/>
	<link href="css/ui.jqgrid.css" rel="stylesheet" type="text/css"/>
	<link href="css/index.css" rel="stylesheet" type="text/css"/>
	
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 
	<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script> 
	<script type="text/javascript" src="js/grid.jqueryui.js"></script>
	<script type="text/javascript" src="js/grid.locale-cn.js"></script>
    <script type="text/javascript" src="js/jquery.hoverIntent.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
	<script type="text/javascript" src="js/layer.ext.js"></script>
		<script type="text/javascript" src="js/layer.min.js"></script>
	

  <script type="text/javascript">		
$(function () {    
	  initGridService();
});
/*
下面一段代码initGrid()的作用是初始化一个jqGrid表格
其中，list1是body中的一个table元素，初始化时不添加任何表格项，将这个元素赋给jqGrid，它会自动其上构建表格
page是一个div元素，同理用于jqGrid生成表格的Pager部分
jqGrid自动向后台传递一些参数，后台利用这些参数来获得所需的数据并返回给jqGrid
jqGrid只负责传递这些参数和显示返回的数据，不负责业务逻辑处理和检查返回的内容是否语义上正确
*/


	function a(){
	if(document.getElementById("msg").value!="null")
		alert(document.getElementById("msg").value);
	}
	
	function initGridService() {
	    var colNames = ['服务网点ID', '服务网点名称', '服务网点类型', '服务网点区域', '服务网点地址', '服务网点业务', '服务网点电话', '服务网点经度', '服务网点纬度', '操作'];//显示在表格上方的列名
	    var colModel = [
	        {name: 'servId', index: 'servId', align: 'center', title: false, sortable: true,
	        editable:true,//该列是否可编辑，由于有修改操作，因此将其置为可编辑
			edittype:'text',
			editoptions:{size:10},
			editrules:{required:true},//（程序上）
			formoptions:{elmprefix:'*'}//编辑和添加时，该项的前面添加一个*来表示必须（视觉上）
			},
	        {name: 'servName', index: 'servName', align: 'center', title: false, sortable: true,
	        editable:true,//该列是否可编辑，由于有修改操作，因此将其置为可编辑
			edittype:'text',
			editoptions:{size:10},
			editrules:{required:true},//（程序上）
			formoptions:{elmprefix:'*'}//编辑和添加时，该项的前面添加一个*来表示必须（视觉上）
			},
			{name: 'servClass', index: 'servClass', align: 'center', title: false, sortable: true,
	        editable:true,//该列是否可编辑，由于有修改操作，因此将其置为可编辑
			edittype:'text',
			editoptions:{size:10},
			editrules:{required:true},//（程序上）
			formoptions:{elmprefix:'*'}//编辑和添加时，该项的前面添加一个*来表示必须（视觉上）
			},
			{name: 'servArea', index: 'servArea', align: 'center', title: false, sortable: true,
	        editable:true,//该列是否可编辑，由于有修改操作，因此将其置为可编辑
			edittype:'select',
			editoptions:{value:"江东区:江东区;高新区:高新区;海曙区:海曙区"},
			editrules:{required:true},//（程序上）
			formoptions:{elmprefix:'*'}//编辑和添加时，该项的前面添加一个*来表示必须（视觉上）
			},
			{name: 'servAddress', index: 'servAddress', align: 'center', title: false, sortable: true,
		        editable:true,//该列是否可编辑，由于有修改操作，因此将其置为可编辑
				edittype:'text',
				editoptions:{size:10},
				editrules:{required:true},//（程序上）
				formoptions:{elmprefix:'*'}//编辑和添加时，该项的前面添加一个*来表示必须（视觉上）
				},
			{name: 'servWork', index: 'servWork', align: 'center', title: false, sortable: true,
		        editable:true,//该列是否可编辑，由于有修改操作，因此将其置为可编辑
				edittype:'text',
				editoptions:{size:10},
				editrules:{required:true},//（程序上）
				formoptions:{elmprefix:'*'}//编辑和添加时，该项的前面添加一个*来表示必须（视觉上）
			},
			{name: 'serPhone', index: 'serPhone', align: 'center', title: false, sortable: true,
		        editable:true,//该列是否可编辑，由于有修改操作，因此将其置为可编辑
				edittype:'text',
				editoptions:{size:10},
				editrules:{required:true},//（程序上）
				formoptions:{elmprefix:'*'}//编辑和添加时，该项的前面添加一个*来表示必须（视觉上）
			},
			
			
			{name: 'servLat', index: 'servLat', align: 'center', title: false, sortable: true,
		        editable:true,//该列是否可编辑，由于有修改操作，因此将其置为可编辑
				edittype:'text',
				editoptions:{onclick:'test()',placeholder:"点击获取经纬度"},
				editrules:{required:true},//（程序上）
				formoptions:{elmprefix:'*'}//编辑和添加时，该项的前面添加一个*来表示必须（视觉上）
				},
			{name: 'servLng', index: 'servLng', align: 'center', title: false, sortable: true,
			    editable:true,//该列是否可编辑，由于有修改操作，因此将其置为可编辑
				edittype:'text',
				editoptions:{onclick:'test()',placeholder:"点击获取经纬度"},
				editrules:{required:true},//（程序上）
				formoptions:{elmprefix:'*'}//编辑和添加时，该项的前面添加一个*来表示必须（视觉上）
					},
	        {name:'act',index:'act',width:200,search:false,align: 'center',sortable:false,editable:false}
	    ];
	    $('#list1').jqGrid({
	    	caption:"<font size='3'>服务网点信息</font>", //表格标题
	        url: "manage/queryService.html",//获得表格数据的后台地址，这个地址用来处理ajax请求，只将数据写到response的输出中，并不返回视图
	        mtype:"post",//ajax请求方式为post
	        datatype: "json",//数据格式为json，jqGrid也支持xml
	        width: 1200,
	        height: "auto",
	        shrinkToFit: true,//自动调整宽高
	        altRows: false,//表格列显示时是否背景颜色交替(调整为true再看一下效果)
	        gridview: true,
	        multiselect: true,//有没有多选框
	        multiselectWidth: 25,
	        colNames: colNames,
	        colModel: colModel,
	        pager: "#page1",
	        pgbuttons:true,
			pginput:true,
	        rowNum: 20,//一页显示记录数
	        sortname: "servId",//初始化显示时，排序的列名
	        sortorder: "asc",//排序的方式
	        viewrecords: true,//是否在pager上显示总记录数
	        toolbar:[true,"top"],
	        prmNames: {sort: "mysort",order:"myorder",search:"mysearch"},//修改默认传递到后台的参数的名称
	        gridComplete: function(){
	                var ids = $("#list1").getDataIDs();//jqGrid('getDataIDs');
	                for(var i=0;i<ids.length;i++){
	                    var cl = ids[i];//为第三列表格项添加内容，即修改和删除链接,editGridRow是jqGrid的函数，直接用就可以
	                    be = "<a href=\"javascript:void(0)\" onclick=\"jQuery('#list1').jqGrid('editGridRow','"+cl+"',{checkOnSubmit:true,checkOnUpdate:true,closeAfterEdit:true,closeOnEscape:true});\">编辑</a>"; 
	                    de = "<a href=\"javascript:void(0)\" onclick=\"multidel('"+cl+"')\">删除</a>";
	                 //   le = "<a href=\"javascript:void(0)\" onclick=\"resetpassword('"+cl+"')\">重置密码</a>";
	                  var datarow ={act:be+"  "+de};
	                    jQuery("#list1").jqGrid('setRowData',ids[i],datarow);
	                }
	            },
	        editurl:'manage/jqgridedits.html',
	        jsonReader: {
	            root: "rows",
	            page: "page",
	            total: "total",
	            records: "records",
	            id:"servId",
	            repeatitems: false,
	        }
	    });
	    $("#t_list1").append("<div style='padding:5px;text-align:left'><input type='button' class='jqgridbtn' value='批量删除' onclick='multidel()' />&nbsp;&nbsp;<input type='button' class='jqgridbtn' value='添加服务网点' onclick='addCompany()' />&nbsp;&nbsp;</div>");	      
	}

	var addCompany = function() {
	    jQuery("#list1").jqGrid("editGridRow","new",{reloadAfterSubmit:true,closeAfterAdd:true,closeOnEscape:true});
	};
	
	function test(){
		//alert("test");
		//window.location.href="index.jsp";
		window.open('ditu.jsp?target=service');
	}

	function multidel(cl)
	{
		var delids = jQuery("#list1").jqGrid('getGridParam','selarrrow');
		var prompt = "确定要删除：";
		function excutedel()//执行删除动作的函数
		{
			cl?id = cl:id = delids.join(",");    
			$.ajax({
					url:"manage/jqgridedits.html",//此处为删除的链接
					type:"post",
					dataType:"json",
					data:{id:id,oper:"del"},
					success:function(data){
					$("#list1").jqGrid().trigger("reloadGrid");
					layer.alert("删除成功",9);
					},
					error:function(){
					}
			});
		}
		if(delids != "")//如果要删除的条目不为空，提示用户要删除哪些条目
		{
			for(var i=0;i<delids.length&&i<3;i++)//循环，做拼接，当条目数大于3时，提示只显示前三条的具体信息，注意，你这里要提示用户被删除的姓名，因此[]里面填Name
			{
				prompt += "<br/>&nbsp;"+ $('#list1').jqGrid('getRowData',delids[i])['servName'];
			}
			if(delids.length>3)
			prompt += "<br/>……<br/>等 " +delids.length+ " 条记录吗？";
			else
			prompt += "<br/>这 " +delids.length+ " 条记录吗？";
			$.layer({title:'删除记录',dialog:{type:3,msg:prompt,btns:2,yes:function(){excutedel();}}});//触发layer的提示函数，如果选择确定，则执行excutedel
		}
		else if(cl == undefined)
		$.layer({title:'提示',dialog:{type:5,msg:'请选择要删除的条目!'}});
		else//这里对应的是删除单条信息，被绑在每一条后面的“删除”链接上
		{
			prompt += "<br/>&nbsp;" + $('#list1').jqGrid('getRowData',cl)['servName'];
			prompt += "<br/>这条记录吗？";
			$.layer({title:'删除记录',dialog:{type:3,msg:prompt,btns:2,yes:function(){excutedel();}}});
		}
		
	}
	

</script>
</head>
<body onload="a()">

<div class="display-container"> 
 		<div class="content-container">
	<a href="manage/toManage.html"><input type="button" id="change" value="切换到商户网点管理界面" style="margin-left:-340px;"></a>
		<div class="content" >
  
<input type="hidden" id="msg" value="<%=msg%>"/>
  <table id="list1"></table>
  <div id="page1"></div>
		</div>
		
		</div>
		<div style="clear:both;"></div>
		</div>
</body>
</html>
